<template>
    <div class="body">
      <dv-border-box-11 title="数据分析" style="min-height: 90vh">
        <div class="content">
          <div class="first-layer">
            <dv-decoration-3 class="left-decoration" style="height: 15vh"/>
            <div class="data-statistics">
              <alarm-data></alarm-data>
            </div>
            <dv-decoration-3 class="right-decoration" style="height: 15vh"/>
          </div>
          <div class="empty-space"></div>
          <div class="second-layer">
            <div class="left-content">
              <dv-decoration-8 style="width:100%;height:4vh;" />
              <div class="empty-space"></div>
              <reason-rank></reason-rank>
            </div>
            <dv-decoration-4 style="width:5px;height:55vh; margin-top: 4vh;" />
            <div class="middle-content">
              <dv-decoration-5 style="width:100%;height:4vh;" />
              <div class="empty-space"></div>
              <trend-analysis></trend-analysis>
              <div class="empty-space"></div>
              <component-alarm></component-alarm>
            </div>
            <dv-decoration-4 style="width:5px;height:55vh; margin-top: 4vh;" />
            <div class="right-content">
              <dv-decoration-8 :reverse="true" style="width:100%;height:4vh;" />
              <div class="empty-space"></div>
              <div class="top-rate">
                <div style="font-size: 2vh; color: #fff; font-weight: bold;">一级报警总量统计</div>
                <br/>
                <div style="display: flex; flex-direction: row; justify-content: space-between">
                  <dv-decoration-9 style="width:8vw;height:15.5vh; font-size: 1.5vh; font-weight: bold" :color="['rgba(25,212,174,0.7)','rgba(69,169,208,0.5)']"><span style="color: rgba(87, 244, 249, 0.8);"><span v-if="oneClassMoM > 0">+</span>{{oneClassMoM | numFilter}}<br/>环比</span></dv-decoration-9>
                  <dv-decoration-9 style="width:8vw;height:15.5vh; font-size: 1.5vh; font-weight: bold"><span style="color: rgba(87, 244, 249, 0.8);"><span v-if="oneClassYoY > 0">+</span>{{oneClassYoY | numFilter}}<br/>同比</span></dv-decoration-9>
                </div>
              </div>
              <div class="empty-space"></div>
              <div class="empty-space"></div>
              <div class="empty-space"></div>
              <div class="empty-space"></div>
              <div class="empty-space"></div>
              <div class="second-rate">
                <div style="font-size: 2vh; color: #fff; font-weight: bold;">二级报警总量统计</div>
                <br/>
                <div style="display: flex; flex-direction: row; justify-content: space-between">
                  <dv-decoration-9 style="width:8vw;height:15.5vh; font-size: 1.5vh; font-weight: bold" :color="['rgba(25,212,174,0.7)','rgba(69,169,208,0.5)']"><span style="color: rgba(87, 244, 249, 0.8);"><span v-if="twoClassMoM > 0">+</span>{{twoClassMoM | numFilter}}<br/>环比</span></dv-decoration-9>
                  <dv-decoration-9 style="width:8vw;height:15.5vh; font-size: 1.5vh; font-weight: bold"><span style="color: rgba(87, 244, 249, 0.8);"><span v-if="twoClassYoY > 0">+</span>{{twoClassYoY | numFilter}}<br/>同比</span></dv-decoration-9>
                </div>
              </div>
            </div>
          </div>
        </div>
      </dv-border-box-11>

    </div>
</template>

<script>
/* eslint-disable */
import alarmData from '../component/alarmData'
import ReasonRank from '../component/reasonRank'
import TrendAnalysis from "../component/trendAnalysis";
import ComponentAlarm from "../component/componentAlarm";
// import request from '@/network/request'
export default {
  name: 'index',
  components: {
    ComponentAlarm,
    TrendAnalysis,
    ReasonRank,
    alarmData
  },
  data() {
    return {
      timer: null,
      oneClassMoM: 0,
      oneClassYoY: 0,
      twoClassMoM: 0,
      twoClassYoY: 0
    }
  },
  methods: {
    getCompareAlarmCount() {
      // request({
      //   url: '/dataOp/getCompareAlarmCount',
      //   method: 'GET'
      // }).then(res => {
      //   this.oneClassMoM = res.data.data.allCount.oneClassMoM
      //   this.oneClassYoY = res.data.data.allCount.oneClassYoY
      //   this.twoClassMoM = res.data.data.allCount.twoClassMoM
      //   this.twoClassYoY = res.data.data.allCount.twoClassYoY
      // })
    }
  },
  filters: {
    numFilter(value) {
      let realVal = parseFloat(value).toFixed(2)
      return realVal
    }
  },
  mounted() {
    this.getCompareAlarmCount()
    this.timer = setInterval(() => {
      this.getCompareAlarmCount()
    }, 5000)
  },
  beforeDestroy () {
    clearInterval(this.timer)
  }
}
/* eslint-disable */
</script>

<style scoped>
  .body {
    height: 100%;
  }
  .dv-border-box-11 .border-box-content{
    padding: 5% !important;
  }
  .content {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding-left: 2%;
    padding-right: 2%;
    padding-top: 5%;
  }
  .first-layer {
    width: 100%;
    height: 20%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    min-height: 100px;
  }
  .second-layer {
    width: 100%;
    height: 75%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    min-height: 375px;
  }
  .left-content, .right-content {
    width: 23%;
    height: 100%;
  }
  .middle-content {
    width: 50%;
    height: 100%;
  }
  .left-decoration {
    width: 23%;
  }
  .right-decoration {
    width: 23%;
  }
  .data-statistics {
    width: 50%;
  }

  .empty-space {
    width: 100%;
    height: 2vh;
  }
</style>
